<template>
  <div class="app-container box">
    <el-row>
      <el-col :span="24">
        <el-card shadow="never">
          <el-col :span="24" class="container">
            <slide-verify
              :l="42"
              :r="10"
              :w="330"
              :h="170"
              @success="onSuccess"
              @fail="onFail"
              @refresh="onRefresh"
              slider-text="向右滑动"
            ></slide-verify>
          </el-col>
        </el-card>
      </el-col>

    </el-row>
  </div>

</template>

<script>
export default {
  name: 'verify',
  methods: {
    onSuccess() {
      this.$message({
        showClose: true,
        message: '验证成功！',
        type: 'success'
      })
    },
    onFail() {
      this.$message({
        showClose: true,
        message: '验证失敗',
        type: 'error'
      })
  },
  onRefresh() {
    this.$message({
      showClose: true,
      message: '刷新成功'
    });
  }
}
}
</script>

<style scoped>
.container {
  padding-bottom: 70px;
  height: calc(100vh - 250px);
}

.slide-verify-slider {
  position: relative;
  text-align: center;
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin-top: 15px;
  background: #f7f9fa;
  color: #45494c;
  border: 1px solid #e4e7eb;
}
</style>
